<template>
  <div>
    <!-- toRef -->
    {{ age }}
    <button @click="age++">age++</button>

    <hr />

    <!-- toRefs -->
    {{ name1 }} ：{{ age1 }}
    <button
      @click="
        () => {
          name1 = '李四';
          age1++;
        }
      "
    >
      age1++
    </button>

    <hr />

    <!-- toRaw -->
    {{ nweUser3.age2 }}
    <button @click="nweUser3.age2++">age2++</button>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRef, toRefs, toRaw } from "vue";

// 【toRef】 的作用是将响应式对象的一个属性转化为一个 ref 响应式对象 非响应式对象没有效果一般也不会用这个
// let age = user1.age; 会丢失响应式
const user1 = reactive({
  name: "张三",
  age: 18,
});

let age = toRef(user1, "age"); // 将 age 属性变成响应式数据

// 【toRefs】把所有响应式对象的属性转化为响应式对象数据
const user2 = reactive({
  name1: "张三",
  age1: 18,
});

const { name1, age1 } = toRefs(user2);

// 【toRaw】将一个 ref 或者 reactive 响应式对象转化为常规原始数据
const user3 = reactive({
  name2: "张三",
  age2: 18,
});

const nweUser3 = toRaw(user3);
</script>

<style scoped></style>
